{% extends 'base.html' %}
{% load staticfiles %}

{% block head %}
    <link rel="stylesheet" href="{% static 'AdminLTE/bower_components/select2/dist/css/select2.min.css' %}">
    <link rel="stylesheet" href="{% static 'AdminLTE/plugins/iCheck/all.css' %}">
    <link rel="stylesheet" href="{% static 'jquery-confirm/dist/jquery-confirm.min.css' %}">
    <style>
        #prev_deploy, #post_deploy, #prev_release, #post_release {
            width: 100%;
            height: 100px;
            position: relative !important;
            border: 1px solid lightgray;
            margin: auto;
        }

        #prev_deploy.fullScreen, #post_deploy.fullScreen, #prev_release.fullScreen, #post_release.fullScreen {
            height: auto;
            width: auto;
            border: 0;
            margin: 0;
            position: fixed !important;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            z-index: 999;
        }

        body .fullScreen {
            overflow: hidden;
            /*transform breaks position fixed*/
            transform: none !important;
        }

        .box.box-info {
            border-top: 1px solid #d2d6de;
        }

        .box-title {
            color: #00c0ef;
        }
    </style>
{% endblock %}

{% block content %}
    <form action="" id="project_config">
        <div class="box box-info">
            <div class="box-header with-border">
                <h3 class="box-title">基础配置</h3>
            </div>
            <!-- /.box-header -->
            <div class="box-body">
                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="project">选择项目</label>
                            <select class="form-control select2" style="width: 100%;" id="project" name="project">
                                <option value="" selected>请选择项目</option>
                                {% for project in projects %}
                                    <option value="{{ project.id }}">{{ project.project_name }}&nbsp;|&nbsp;{{ project.get_project_env_display }}</option>
                                {% endfor %}
                            </select>
                        </div>
                        <!-- /.form-group -->
                        <div class="form-group">
                            <label for="repo">选择仓库类型</label>
                            <select class="form-control select2" style="width: 100%;" name="repo" id="repo">
                                <option value="" selected>请选择仓库类型</option>
                                {% for repo in repos %}
                                    <option value="{{ repo.0 }}">{{ repo.1 }}</option>
                                {% endfor %}
                            </select>
                        </div>

                        <div class="form-group" id="repo_auth">
                            <label for="repo" style="display: block">仓库账号密码 <span
                                    style="color: #FF0000"> *当git仓库使用ssh协议时，无需配置</span></label>
                            <input type="text" class="form-control" id="repo_user" name="repo_user"
                                   placeholder="输入账号"
                                   style="display: inline-block; width: 49%">
                            <input type="password" class="form-control" id="repo_password" name="repo_password"
                                   placeholder="输入密码"
                                   style="display: inline-block; width: 49%; float: right">
                        </div>
                        <!-- /.form-group -->
                    </div>
                    <!-- /.col -->
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="repo_url">仓库地址</label>
                            <input type="text" class="form-control" id="repo_url" name="repo_url">
                        </div>
                        <!-- /.form-group -->
                        <div class="form-group">
                            <label for="repo_model">分支/Tag</label>
                            <select class="form-control select2" style="width: 100%;" name="repo_model" id="repo_model">

                            </select>
                        </div>
                        <!-- /.form-group -->
                        <div class="form-group">
                            <label for="git_port">git端口，默认是22 <span
                                    style="color: #FF0000"> *当git仓库使用http(s)协议时，无需配置</span></label>
                            <input type="text" class="form-control" id="git_port" name="git_port" value="22">
                        </div>
                    </div>
                    <!-- /.col -->
                </div>
                <!-- /.row -->
            </div>
            <!-- /.box-body -->
        </div>

        <div class="box box-info">
            <div class="box-header with-border">
                <h3 class="box-title">宿主机配置</h3>
            </div>
            <!-- /.box-header -->
            <div class="box-body">
                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="src_dir">代码检出地址&nbsp;<span data-toggle="tooltip" title="宿主机存放所有源代码的统一路径">
                            <i class="fa fa-exclamation-circle"></i></span></label>
                            <input type="text" class="form-control" id="src_dir" name="src_dir">
                        </div>
                    </div>

                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="exclude">排除文件&nbsp;<span data-toggle="tooltip"
                                                                 title="排除不需要打包同步至服务器的文件或目录，一行一个，支持通配符，如：*.log">
                            <i class="fa fa-exclamation-circle"></i></span></label>
                            <textarea class="form-control" rows="4" id="exclude" name="exclude"></textarea>
                        </div>
                    </div>
                    <!-- /.col -->
                </div>
                <!-- /.row -->
            </div>
            <!-- /.box-body -->
        </div>

        <div class="box box-info">
            <div class="box-header with-border">
                <h3 class="box-title">目标服务器配置</h3>
            </div>
            <!-- /.box-header -->
            <div class="box-body">
                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="deploy_server">目标服务器&nbsp;<span data-toggle="tooltip" title="部署代码的机器">
                            <i class="fa fa-exclamation-circle"></i></span></label>
                            <select class="form-control select2" style="width: 100%;" multiple="multiple"
                                    name="deploy_server" id="deploy_server">
                                {% for server_asset in server_assets %}
                                    <option value="{{ server_asset.id }}">{{ server_asset.assets.asset_management_ip }}</option>
                                {% endfor %}
                            </select>
                        </div>

                        <div class="form-group">
                            <label for="deploy_webroot">部署路径&nbsp;<span data-toggle="tooltip"
                                                                        title="指定webroot目录，如：/usr/local/tomcat/webapps">
                            <i class="fa fa-exclamation-circle"></i></span></label>
                            <input type="text" class="form-control" id="deploy_webroot" name="deploy_webroot">
                        </div>

                        <div class="form-group">
                            <label for="run_user">用户&nbsp;<span data-toggle="tooltip" title="指定运行服务的用户，默认是root">
                            <i class="fa fa-exclamation-circle"></i></span></label>
                            <input type="text" class="form-control" id="run_user" name="run_user" value="root">
                        </div>
                    </div>

                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="deploy_releases">版本仓库路径&nbsp;<span data-toggle="tooltip" title="用于存储、回滚等版本管理">
                            <i class="fa fa-exclamation-circle"></i></span></label>
                            <input type="text" class="form-control" id="deploy_releases" name="deploy_releases">
                        </div>

                        <div class="form-group">
                            <label for="releases_num">版本保留数&nbsp;<span data-toggle="tooltip" title="默认保留20个">
                            <i class="fa fa-exclamation-circle"></i></span></label>
                            <input type="text" class="form-control" id="releases_num" name="releases_num" value="20">
                        </div>
                    </div>
                    <!-- /.col -->
                </div>
                <!-- /.row -->
            </div>
            <!-- /.box-body -->
        </div>

        <div class="box box-info">
            <div class="box-header with-border">
                <h3 class="box-title">任务配置</h3> <span
                    style="color: #FF0000">* 所有任务必须是shell可以执行的命令，一行一条，注释以#开头，按F11可进入全屏编辑</span>
            </div>
            <!-- /.box-header -->
            <div class="box-body">
                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="prev_deploy">代码检出前任务&nbsp;<span data-toggle="tooltip" title="如安装依赖、配置环境变量等">
                            <i class="fa fa-exclamation-circle"></i></span></label>
                            <div id="prev_deploy" name="prev_deploy"></div>
                        </div>

                        <div class="form-group">
                            <label for="prev_release">部署前任务&nbsp;<span data-toggle="tooltip"
                                                                       title="在目标服务器同步代码至版本库后的操作，如暂停服务等">
                            <i class="fa fa-exclamation-circle"></i></span></label>
                            <div id="prev_release" name="prev_release"></div>
                        </div>
                    </div>

                    <div class="col-md-6">
                        <div class="form-group">
                            <label for="post_deploy">代码检出后任务&nbsp;<span data-toggle="tooltip" title="如编译、清除文件等">
                            <i class="fa fa-exclamation-circle"></i></span></label>
                            <span class="text-red">系统默认会切换到代码路径，所以无需再手工切换目录</span>
                            <div id="post_deploy" name="post_deploy"></div>
                        </div>

                        <div class="form-group">
                            <label for="post_release">部署后任务&nbsp;<span data-toggle="tooltip"
                                                                       title="在目标服务器新版本服务切换后的操作，如删除缓存、启动服务等">
                            <i class="fa fa-exclamation-circle"></i></span></label>
                            <div id="post_release" name="post_release"></div>
                        </div>
                    </div>
                    <!-- /.col -->
                </div>
                <!-- /.row -->
            </div>
            <!-- /.box-body -->
        </div>

        <div class="box box-info">
            <div class="box-header with-border">
                <h3 class="box-title">部署通知</h3>
            </div>
            <!-- /.box-header -->
            <div class="box-body">
                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group">
                            <label style="cursor: pointer">
                                <input type="checkbox" class="minimal" id="wx_notice">&nbsp;&nbsp;&nbsp;微信通知
                            </label>
                        </div>
                        <div class="form-group">
                            <label style="cursor: pointer">
                                <input type="checkbox" class="minimal" id="mail_notice">&nbsp;&nbsp;&nbsp;邮箱通知
                            </label>
                        </div>
                    </div>

                    <div class="col-md-6" id="mail_info" style="display: none">
                        <div class="form-group">
                            <label for="exclude">收件人</label>
                            <textarea class="form-control" rows="2" id="to_mail" name="to_mail"
                                      placeholder="多个邮箱用英文逗号隔开"></textarea>
                        </div>
                        <div class="form-group">
                            <label for="exclude">抄送人</label>
                            <textarea class="form-control" rows="2" id="cc_mail" name="cc_mail"
                                      placeholder="多个邮箱用英文逗号隔开"></textarea>
                        </div>
                    </div>
                    <!-- /.col -->
                </div>
                <!-- /.row -->
            </div>
            <!-- /.box-body -->
        </div>

        <div class="box-footer">
            <button type="button" class="btn btn-default pull-right" onclick="history.go(-1)">返回</button>
            <button type="button" class="btn btn-info pull-right add-conf" style="margin-right: 5px">添加</button>
        </div>
    </form>
{% endblock %}

{% block js %}
    <script src="{% static 'AdminLTE/bower_components/select2/dist/js/select2.full.min.js' %}"></script>
    <script src="{% static 'ace/js/ace.js' %}"></script>
    <script src="{% static 'ace/js/mode-sh.js' %}"></script>
    <script src="{% static 'ace/js/theme-tomorrow.js' %}"></script>
    <script src="{% static 'ace/js/ext-language_tools.js' %}"></script>
    <script src="{% static 'AdminLTE/plugins/iCheck/icheck.min.js' %}"></script>
    <script src="{% static 'jquery-confirm/dist/jquery-confirm.min.js' %}"></script>

    <script>

        let editors = ["prev_deploy", "post_deploy", "prev_release", "post_release"];
        let dom = ace.require("ace/lib/dom");
        $(function () {
            $("[data-toggle='tooltip']").tooltip();
            // Initialize Select2 Elements
            $('.select2').select2({
                allowClear: true
            });

            init_editor(editors);

            $('input[type="checkbox"].minimal, input[type="radio"].minimal').iCheck({
                checkboxClass: 'icheckbox_minimal-blue',
            })
        });

        ace.require("ace/commands/default_commands").commands.push({
            name: "Toggle Fullscreen",
            bindKey: "F11",
            exec: function (editor) {
                let fullScreen = dom.toggleCssClass(document.body, "fullScreen");
                dom.setCssClass(editor.container, "fullScreen", fullScreen);
                editor.setAutoScrollEditorIntoView(!fullScreen);
                editor.resize()
            }
        });

        function init_editor(elements) {
            ace.require("ace/ext/language_tools");
            for (let element of elements) {
                let editor = ace.edit(element, {
                    mode: "ace/mode/sh",
                    selectionStyle: "text",
                    theme: "ace/theme/monokai",
                    enableBasicAutocompletion: true,
                    enableSnippets: true,
                    enableLiveAutocompletion: true,
                    autoScrollEditorIntoView: true
                });

                function scroll(speed) {
                    let top = editor.container.getBoundingClientRect().top;
                    speed = speed || 10;
                    if (top > 60 && speed < 500) {
                        if (speed > top - speed - 50)
                            speed = top - speed - 50;
                        else
                            setTimeout(scroll, 10, speed + 10);
                        window.scrollBy(0, speed)
                    }
                }
            }
        }


        window.scroll = scroll;

        $('#mail_notice').on('ifChecked', function () {
            $('#mail_info').css('display', 'block');
            $('#to_mail').attr('name', 'to_mail');
            $('#cc_mail').attr('name', 'cc_mail');
        }).on('ifUnchecked', function () {
            $('#mail_info').css('display', 'none');
            $('#to_mail, #cc_mail').removeAttr('name')
        });

        $('#repo').on('change', function () {
            let repo = $(this).val();
            let repo_model = $('#repo_model');
            repo_model.empty();
            if (repo === 'git') {
                repo_model.append('<option value="branch">branch</option> <option value="tag">tag</option>')
            } else {
                repo_model.append('<option value="trunk">trunk</option> <option value="branch">branch</option> <option value="tag">tag</option>')
            }
        });

        // 添加项目配置
        $('.add-conf').on('click', function () {
            let data = $('#project_config').serializeJson();
            let v = get_editor_value(editors);
            $.extend(data, v, {wx_notice: false});

            let a = $('#wx_notice').is(':checked');
            data.wx_notice = !!a;


            $.ajax({
                url: '/api/project_config/',
                type: 'POST',
                data: JSON.stringify(data),
                dataType: 'json',
                contentType: "application/json",
                success: function () {
                    $.alert({
                        title: 'Tips',
                        type: 'green',
                        content: '添加成功！',
                    })
                },
                error: function (response) {
                    $.alert({
                        title: 'Tips',
                        type: 'red',
                        content: response.responseText,
                    })
                }
            })

        });

        function get_editor_value(elements) {
            let editor_values = {};
            for (let element of elements) {
                let editor_name = element + 'editor';
                editor_name = ace.edit(element);
                editor_values[element] = editor_name.getSession().getValue();
            }
            return editor_values
        }

        // 将数据JSON化
        (function ($) {
            $.fn.serializeJson = function () {
                let serializeObj = {};
                let array = this.serializeArray();
                $(array).each(function () {
                    if (serializeObj[this.name]) {
                        if ($.isArray(serializeObj[this.name])) {
                            serializeObj[this.name].push(this.value);
                        } else {
                            serializeObj[this.name] = [serializeObj[this.name], this.value];
                        }
                    } else {
                        if (this.name === 'deploy_server') {
                            serializeObj[this.name] = [this.value];
                        } else {
                            serializeObj[this.name] = this.value;
                        }
                    }
                });
                return serializeObj;
            };
        })(jQuery);
    </script>

{% endblock %}